<template>
  <div class="CartoonUser">
    <van-loading class="loading" v-show="IsLongding===false" type="spinner" size="24px">加载中...</van-loading>
    <div  v-show="IsLongding===true" class="nav-bar" ref="nav-bar" :style="{'backgroundColor':backgroundColor}">
          <van-nav-bar
            left-arrow
        >
          <template #left>
            <div class="user-top-top-left" @click="goBack">
            <van-icon name="arrow-left" />
          </div>
        </template>
        <template #title>
            <div
            class="user-top-top-name auto-text"
            :style="{ opacity: opacity }"
          >
            {{user.nickname}}
          </div>
        </template>

        </van-nav-bar>
    </div>
    <div  v-show="IsLongding===true" class="img">
        <img v-if="user.background_uri != ''" :src="user.background_uri" alt="">
        <img  v-else src="../assets/2222.png" alt="">
    </div>

    <div class="container" ref="container" @scroll="scroll">
      <div  class="user-top-bg">
        <img v-if="user.background_uri != ''" :src="user.background_uri " alt="">
        <img v-else src="../assets/2222.png" alt="">
      </div>
      <div class="user-bottom" ref="userbottom">
        <div class="user-bottom-top">
          <div class="user-bottom-top-img">
            <img :src="user.avatar" alt="" />
          </div>
          <div class="user-bottom-top-container">
            <div class="user-bottom-top-container-top">
              <div class="item">
                <div class="item-action">关注</div>
                <div class="item-number">{{user.line_follows | forNumber}}</div>
              </div>
              <div class="item">
                <div class="item-action">粉丝</div>
                <div class="item-number">{{user.line_fans | forNumber}}</div>
              </div>
              <div class="item">
                <div class="item-action">获赞</div>
                <div class="item-number">{{user.like_cnt | forNumber}}</div>
              </div>
            </div>
            <div class="item-acction">+<span class="acction">关注</span></div>
          </div>
        </div>
        <div class="user-bottom-user">
          <div class="user-bottom-user-name">
            <span class="user-bottom-user-name-left">{{user.nickname}}</span>
            <!-- <span class="user-bottom-user-name-right">VIP1</span> -->
          </div>
          <div v-if="user.intro != ''" class="user-bottom-user-title">{{user.intro}}</div>
          <div v-else class="user-bottom-user-title">追漫小天才还没有自我介绍呢~</div>
        </div>
      </div>

      <div class="user-container" ref="vant" v-if="screenWidth!=null">
        <van-tabs v-model="active" sticky :offset-top="Width">
          <van-tab title="Ta的点评">
            <van-list
              v-model="loading1"
              :finished="finished1"
              finished-text="没有更多了"
               @load="onLoad1"
               :immediate-check="false"
            >
            <div v-if="userDian.length!=0">
              <div class="tadian" v-for="(item,index) in userDian" :key="index">
                <div class="diantime">
                  <div class="diantime-span">
                      <span>打分</span>
                      <van-rate v-model="item.score" size="14" readonly />
                      <span>{{item.ctime}}</span>
                  </div>
                  <van-icon name="ellipsis" @click="showShare = true" />
                  <van-share-sheet
                    v-model="showShare"
                    title="举报"
                    @select="onSelect"
                  />
                </div>
                <div class="diantitle">
                  {{item.content}}
                </div>
                <div class="diancartoon" @click="goto(item.comic_id)">
                  <div class="diancartoon-img">
                    <img :src="item.comic_vcover" alt="" />
                  </div>
                  <div class="diancartoon-name">
                    <div class="diancartoon-name-top">{{item.comic_title}}</div>
                    <div class="diancartoon-name-bottom">{{item.authors}}</div>
                  </div>
                  <div class="diancartoon-arrow">
                    <van-icon name="arrow" />
                  </div>
                </div>
              </div>
            </div>
              
              <div v-else>暂无点评</div>
            </van-list>

          </van-tab>
          <van-tab title="Ta的追漫">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
               @load="onLoad"
               :immediate-check="false"
            >
              <div class="tazhui">
                <div class="tazhui-container" @click="goto(item.comic_id)" v-for="(item,index) in CartoonZhui" :key="index">
                  <div class="tazhui-container-img">
                    <img :src="item.vcover" alt="" />
                  </div>
                  <div class="tazhui-container-title auto-text">{{item.title}}</div>
                  <div class="tazhui-container-name">{{item.styles[0]}}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartoonUser",
  data() {
    return {
      IsLongding: false,

      loading:false,
      finished:false,

      loading1:false,
      finished1:false,
    // 加载
      IsLongding: false,
        isTrue:false,
        isTrue1:false,
      active: 0,
      showShare: false,
      // 透明度
      opacity: 0,
      // 背景颜色
      backgroundColor: "rgba(255,255,255,0)",

        screenWidth: null,  //屏幕尺寸
        Width:0,

        // 用户ID
        uid:'',

        // 用户数据
        user:[],

        // 打分
        dafen:0,

        // 页面数量
        pageSize:15,
        pageSize1:15,

        // 页数
        pageNum:1,
        pageNum1:1,

        userDian:[],
        // 作者
        authors:'',

        // 追漫
        CartoonZhui:[],
    };
  },
  created(){
        this.screenWidth = document.body.clientWidth;
        this.screenWidth = document.body.clientWidth;
        this.Width = Math.floor((46 / 375) * Number(this.screenWidth) * 100) / 100;

        this.uid = this.$route.query.id;
        
        this.getCartoonUser(this.$route.query.id);

        this.getDian(this.$route.query.id);

        this.getZhui(this.$route.query.id)

  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.Width =
        Math.floor((46 / 375) * Number(this.screenWidth) * 100) / 100;
      })();
    };
  },
  methods: {
    onSelect() {
      this.showShare = false;
    },

    scroll() {
        if(this.$refs.container.scrollTop>0){
            this.backgroundColor = "rgba(255,255,255,1)";
            this.opacity = 1;
        }else if(this.$refs.container.scrollTop === 0){
            this.backgroundColor = "rgba(255,255,255,0)";
            this.opacity = 0;
        }

        if(this.$refs.container.scrollHeight - this.$refs.container.scrollTop === this.$refs.container.clientHeight){
            this.isTrue = true;
        }
    },

    // 返回上一级
    goBack() {
      this.$router.back();
    },

    getCartoonUser(id) {
      this.axios({
        meethods: "GET",
        url: "GetBaseSpaceInfo",
        params:{
            uid:id
        }
      }).then(result=>{
        
        // if(result.data.data)
        this.IsLongding = true;
          this.user = result.data.data;
      })
    },

    // 点评
    getDian(id){
        this.axios({
            methods:'GET',
            url:'GetReviews',
            params:{
                uid:id,
                pageSize:this.pageSize,
                pageNum:this.pageNum
            }
        }).then(result=>{

           this.IsLongding = true;
            this.loading1 = false;
            if(result.data.data.reviews.length === 0){
                this.finished1 = true;
                return;
            }
            this.userDian.push(...result.data.data.reviews);
            let arr = [];
            let name = '';
            for(let i = 0 ; i < this.userDian.length;i++){
                this.userDian[i].score = Number(this.userDian[i].score)  / 2;

                // 时间
                let namm = this.userDian[i].ctime.split(" ");
                this.userDian[i].ctime = namm[0];

                // 作者
                arr.push(this.userDian[i].authors)
                if(this.userDian[i].authors.length>1){
                    for(let j = 0 ; j < this.userDian[i].authors.length;j++){
                        if(j === this.userDian[i].authors.length-1){
                            name += this.userDian[i].authors[j]
                        }else{
                            name +=this.userDian[i].authors[j] + '、'
                        }
                    }
                }else if(this.userDian[i].authors.length === 0){
                    name = this.userDian[i].authors
                }
                this.userDian[i].authors = name;
                
            }
        })
    },

    // 追漫
    getZhui(id){
        this.axios({
            methods:'GET',
            url:'GetFavComics',
            params:{
                uid:id,
                pageSize:this.pageSize1,
                pageNum:this.pageNum1,
            }
        }).then(result=>{
          this.loading = false;
          if(result.data.data.fav_comics.length === 0){
            this.finished = true;
            return;
          }
            this.CartoonZhui.push(...result.data.data.fav_comics)
        })
    },

    // 跳转用户详情
    goto(item){
      this.$router.push({name:"CartoonContainer",query:{id:item}})
    },

    // 触底
    onLoad(){
      this.pageNum1++;
      this.loading = true;
      this.getZhui(this.uid);
    },
    onLoad1(){
      this.pageNum++;
      // this.loading1 = true;
      this.getDian(this.id);

    }
  },
};
</script>

<style lang="less" scoped>
/deep/.van-overlay{
    background-color: rgba(74,74,75, 0.1);
}
/deep/.van-overlay{
    background-color: rgba(74,74,75, 0.1);
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.text{
    text-align: center;
}
/deep/.van-rate{
    padding: 0px 10px;
}
.user-top-top-left {
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 50%;
      background-color: rgba(7,37,47, 0.2);
      text-align: center;
    }
.container {
  height: calc(100vh - 50px);
  overflow-y: auto;
}
/deep/.van-icon-arrow-left {
  padding-top: 4.5px;
  padding-right: 2px;
  color: #fff;
  font-size: 14px;
}
/deep/.van-icon-ellipsis {
  font-size: 15px;
}
/deep/.van-share-sheet__options {
  padding: 0;
}
/deep/.van-hairline--bottom::after{
    border: none;
}
.diantime-span {
  padding-top: 3px;
}
.CartoonUser {
  background-color: #fbfcfe;
  position: relative;
}
/deep/.van-nav-bar{
    width: 100%;
background-color: transparent;
}
.nav-bar{
    width: 100%;
    position: absolute;
    overflow: hidden;
}
.img{
    width: 100%;
    height: 46px;
    overflow: hidden;
    img{
        width: 100%;
    }
}
.user-top-bg {
    width: 100%;
    height: 120px;
    position: relative;
  > img {
    width: 100%;
    position: absolute;
    top: -46px;
  }
}
.user-bottom {
  position: relative;
  padding: 5px 10px;
  .user-bottom-top {
    display: flex;
    align-items: center;
    .user-bottom-top-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow:0px 5px 4px #888888;
      >img{
          width: 100%;
          height: 100%;
          display: block;
      }
    }
    .user-bottom-top-container {
      margin-left: 20px;
      width: 75%;
      .user-bottom-top-container-top {
        display: flex;
        width: 100%;
        text-align: center;
        .item {
          flex: 1;
          padding: 8px 20px;
          .item-number {
            padding-top: 2px;
            font-weight: 700;
          }
          .item-action {
            color: #9c9ba1;
          }
        }
      }
      .item-acction {
        width: 100%;
        background-color: #32aaff;
        text-align: center;
        padding: 8px 0;
        border-radius: 15px;
        color: #fff;
        font-size: 13px;
        .acction {
          padding-left: 2px;
        }
      }
    }
  }
  .user-bottom-user {
    margin-top: 10px;
    .user-bottom-user-name {
      padding: 10px 0;
      display: flex;
      align-items: center;
      .user-bottom-user-name-left {
        font-weight: 700;
        font-size: 16px;
      }
      .user-bottom-user-name-right {
        margin-left: 5px;
        font-weight: 700;
        background-color: red;
        padding: 1px;
        margin-top: 3px;
      }
    }
    .user-bottom-user-title {
      color: #9c9ba1;
      font-size: 13px;
    }
  }
}

.tadian {
  padding: 10px 10px;
  border-bottom: 1px solid #F2F2F2;
  .diantime {
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
    color: #9c9ba1;
  }
  .diantitle {
    padding: 5px 0px;
    color: #9c9ba1;
  }
  .diancartoon {
    display: flex;
    background-color: #f5f6f8;
    border-radius: 5px;
    .diancartoon-img {
      width: 50px;
      height: 70px;
      background-color: #9c9ba1;
      >img{
          width: 100%;
          height: 100%;
          display: block;
      }
    }
    .diancartoon-name {
      flex: 1;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .diancartoon-name-top {
        font-weight: 700;
        font-size: 14px;
      }
      .diancartoon-name-bottom {
        color: #9c9ba1;
      }
    }
    .diancartoon-arrow {
      display: flex;
      align-items: center;
      margin-left: auto;
      padding-right: 10px;
      font-size: 13px;
    }
  }
}


.tazhui {
  width: calc(100% - 20px);
  padding: 5px 10px;
  display: flex;
  flex-wrap: wrap;
  .tazhui-container {
    width: calc(33.33% - 8px + 8px / 3);
    margin-top: 10px;
    margin-right: 8px;
    .tazhui-container-img {
      width: 100%;
      height: 150px;
      background-color: #9c9ba1;
      >img{
          width: 100%;
          height: 100%;
          display: block;
      }
    }
    .tazhui-container-title {
      width: 100%;
      padding-top: 5px;
    }
    .tazhui-container-name {
      color: #9c9ba1;
    }
  }
  .tazhui-container:nth-child(3n) {
    margin-right: 0px;
  }
}
</style>